import React, { Component } from 'react';
import {StyleSheet,View} from 'react-native';
import { Layer,Label,Button } from 'iftide';

export default class Basic extends Component {
    
    operate1() { 
        console.log('operate1 Press!');
        Layer.hide();
    }
    operate2() { 
        console.log('operate2 Press!');
    }
    
    fun1() {
        Layer.show({
            title:"浮层标题1",
            clickMask:true,
            operateText:"其他操作",
            content: <Label labelStyle={{flex:1}} text="内容区域" />,
            operateFunc:()=>this.operate1()
        });
    }
    
    fun2() { 
        Layer.show({
            title:"标题2",
            showMask:false,
            operateTxt:"操作",
            innerHeight:400,
            content: <Label labelStyle={{flex:1}} text="内容区域" />,
            operateFunc:()=>this.operate2(),
        });
    }
    render() {
        return (
            <View style={styles.container}> 
                <Label labelStyle={styles.text} text="半屏组件是用于承载内容的容器，从页面底部向上滑出。" />
                <Label labelStyle={styles.text} text="说明：" />
                <Label labelStyle={styles.text} text="浮层1带有遮罩层，点击遮罩可收起当前浮层，示例如下：" />
                <Button
                    title={"点击显示浮层1"}
                    marginLeft={2}
                    onPress={() => this.fun1()}
                />
                <Label labelStyle={styles.text} text="浮层2无遮罩层，左侧默认收起浮层操作，示例如下：" />
                <Button
                    title={"点击显示浮层2"}
                    onPress={() => this.fun2()}
                />
            </View>
          );
      }
}

const styles = StyleSheet.create({
    container: {
      flexDirection: "column",
    },
    text: {
        fontSize: 14,
        marginBottom: 10,
        marginTop: 10,
    }
})